<template>
    <nav v-if="bigwidth === true" class="nav">

<router-link to="/device/devicelist"><div>
  设备列表
</div></router-link>

<router-link to="/device/insectdetection"><div>
  虫情测报
</div></router-link>

<router-link to="/device/photo"><div>
  虫情图片
</div></router-link>

<router-link to="/device/photos"><div>
  虫情识别
</div></router-link>
<router-link to="/device/meteorology"><div>
  气象数据
</div></router-link>

<router-link to="/device/environmentalmonitor"><div>
  环境监测
</div></router-link>
<router-link to="/device/monitor"><div>
  监控信息
</div></router-link>

</nav>

    <!-- 手机端 -->
    <div v-else class="modalnav">
        <!-- <div class="opendrawer">
          <Button @click="value1 = true" type="primary"><Icon type="md-arrow-forward" /></Button>
        </div> -->

            <Drawer placement="left" :closable="false" v-model="value1" styles="padding:0;margin-top:4.4rem;" width="30%">
            <Menu mode="vertical" :theme="theme" :active-name="router" style="width:100%">
        <MenuItem name="device/devicelist" to="/device/devicelist">
            设备列表
        </MenuItem>
        <MenuItem name="/device/insectdetection" to="/device/insectdetection">
            虫情测报
        </MenuItem>
        <MenuItem name="/device/environmentalmonitor" to="/device/environmentalmonitor">
            环境监测
        </MenuItem>
        <MenuItem name="/device/monitor" to="/device/monitor">
            监控信息
        </MenuItem>
    </Menu>
        </Drawer>
    </div>

    <div class="opendrawer">
          <Button @click="value1 = true" type="primary"><Icon type="md-arrow-forward" /></Button>
        </div>

</template>

<script>
import {Menu,MenuItem,Button,Drawer,Icon} from 'view-ui-plus'
export default {
    data(){
        return {
            theme:'dark',
            router:null,
            bigwidth:true,
            value1:false
        }
    },
    components:{
        Menu,MenuItem,Button,Drawer,Icon
    },
    created(){
        this.getwidth();
    },
    methods:{
        getwidth(){
      console.log("device",window.innerWidth);
    this.bigwidth = window.innerWidth > 720 ? true:false;

    },
    },
    mounted() {
      window.addEventListener('resize', () => {
            return (() => {
                this.$nextTick(()=>{
              this.bigwidth = window.innerWidth > 720 ? true:false;
            })
        })();
      });
    },
    watch:{
    $route:{
      handler(val){
        this.router = "/"+val.name;
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>

  .nav{
    position: fixed;
  z-index: 0;

  top:4.4rem;
  height: 100%;
  width: 8rem;

    background-color: rgb(81, 90, 110);
    // width: 100%;
    // height: 100%;
    a{
      div{
        color: white;
        text-align: center;
        height: 4rem;
        padding: 1rem 0;
      }
    }
    
  .router-link-active{
      div{
        color: skyblue;
      }
 
    }
  }
  .mosalnav{
    position: fixed;
  z-index: 999;
  }

@media screen and (max-width: 720px) {

    }
</style>

<!-- 修改侧边导航栏样式 -->
<style lang="less">
@media screen and (max-width: 720px) {
        .ivu-drawer-content{
          // width:50% !important;
          height:100% !important;
            background-color: rgba(0,0,0,0) !important;
            box-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
            .ivu-menu{
              height: 100% !important;
            }
        }
        .opendrawer{
          .ivu-btn{
  top:4.4rem;
            position:fixed;
    z-index: 99 !important;
          }
  }
    }
</style>